<template>
    <div class="mymonitor_content">
        <el-scrollbar height="100%">
            <div class="list">
                <template v-if="monitorState.monitordata.length > 0">
                <div class="item" v-for="(item,index) in monitorState.monitordata" @click="monitorStore.openMatchDialog(item)" :key="item">
                    <div class="item_header">
                        <div>{{item.name}}</div>
                        <div style="display: flex;align-items: center;">
                            <div style="margin-right: 12px;cursor: pointer;color: #e92937;" @click.stop="monitorStore.editmonitor(item)">编辑</div>
                            <img src="@/assets/monitor/del.png" style="width: 16px;height: 16px" alt="" @click.stop="deletemonitor(item)">
                        </div>
                        
                    </div>
                    <div class="item_content">
                        <div class="form_item">
                            <div class="label">盘口类型:</div>
                            <div class="value">{{item.pk_type_name?.join('、') || '--'}}</div>
                        </div>
                        <div class="form_item">
                            <div class="label">监控平台:</div>
                            <div class="value">
                                <div>{{bctypesmap[item.bc_type]}}</div>
                            </div>
                        </div>
                        <div class="form_item">
                            <div class="label">间隔时间:</div>
                            <div class="value">{{item.time}}s</div>
                        </div>
                        <div class="form_item">
                            <div class="label">指数变化:</div>
                            <div class="value">{{item.zs_condition_value[0]}}-{{item.zs_condition_value[1]}}</div>
                        </div>
                        
                    </div>
                    <div class="item_select">
                        <div class="text">
                            <div>最近符合当前监控器的比赛信息</div>
                            <div class="num">{{item.count}}</div>
                        </div>
                        <!-- <img src="@/assets/monitor/down-square 2.png" style="width: 12px;height: 12px;" alt=""> -->
                    </div>
                </div>
                </template>
                <template v-else>
                    <el-empty :image-size="100" />
                </template>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage, ElMessageBox } from 'element-plus'

const { monitorStore, monitorState } = inject('MonitorStore')
const bctypesmap = computed(() => {
  let a = {}
  let b = JSON.parse(localStorage.userInfo)
  if (b.products.data_feed) {
    b.products.data_feed.list.forEach(item => {
    //   a.push({
    //     value: item.attr_code,
    //     label: item.attr_name
    //   })
      a[item.attr_code] = item.attr_name
    });
  }

  return a
})

const getbctype = (bctypes) => {
    let a = ''
    bctypes.forEach((item,index) => {
        if (index != 0) {
            a += '、'
        }
        if (bctypesmap.value[item]) {
            a += bctypesmap.value[item]
        }
        
    });
    return a
}

const deletemonitor = (row) => {
    ElMessageBox.confirm(
    '是否删除监控',
    '提示',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        http.delete(`/zhishu/del_monitoring`,{params:{task_code:row.task_code}}).then((res) => {
            ElMessage({
        type: 'success',
        message: '删除成功',
      })
        })
      
    })
    .catch(() => {
    })
}
</script>

<style lang="scss" scoped>
.mymonitor_content {
    width: 100%;
    height: calc(100% - 40px);
    
}

.list {
    display: flex;
    flex-direction: column;

    .item {
        min-height: 124px;
        padding: 12px;
        border-bottom: 1px solid #ebebeb;
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }
}

.item_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.item_content {
    display: flex;
    flex-direction: column;
    margin: 8px 0;

    .form_item {
        display: flex;
        align-items: flex-start;
        min-height: 18px;

        .label {
            font-size: 12px;
            color: #8a8a8a;
            width: 54px;
        }

        .value {
            width: calc( 100% - 54px );
            margin-left: 4px;
            font-size: 12px;
            font-weight: bold;
            color: #000;
            display: flex;
            align-items: center;

        }
    }

}
.item_select{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.item_select .text {
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    display: flex;

}

.item_select .text .num {
    background-color: #e92937;
    margin-left: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    padding: 0 4px 0 4px;
    border-radius: 7px;
}
</style>